<template lang="pug">
  .zgplugin-input.zgplugin-empty(v-if="(!exist || !show)&&editor&&!isDetailMode")
    svg-icon.empty-icon(icon-class="组件输入框")
  .zgplugin-input(v-show="show" v-else-if="exist&&!isDetailMode")
    normal-input-render(v-if="!config.isFilter" ref="normalInput" :config="config" :scope="scope" :readonlyMain="readonlyMain" :isMobile="isMobile" :editor="editor" :cancelLinkAndDefaultValue="cancelLinkAndDefaultValue" :parentProperty="parentProperty")
    filter-input-render(v-if="config.isFilter" ref="filterInput" :config="config" :isMobile="isMobile" :editor="editor")
  span(v-else-if="isDetailMode") {{rootForm.properties[config.propertyName]}}
</template>

<script>
import normalInputRender from './normalInputRender'
import filterInputRender from './filterInputRender'
import inputCommon from '../../../../mixin/inputCommon'

export default {
  name: 'inputRender',
  components: { normalInputRender, filterInputRender },
  props: ['config', 'readonlyMain', 'editor', 'isMobile', 'scope', 'cancelLinkAndDefaultValue', 'parentProperty'],
  mixins: [inputCommon],
  inject: ['rootForm'],
  methods: {
    commit() {
      this.$refs.filterInput.commit()
    },
    validate() {
      return this.$refs.normalInput.validate()
    }
  },
  created() {
  }
}
</script>
<style lang="scss">
  .zgplugin-input {
    margin-top: 16px;
    .el-form-item {
      margin-bottom: 0 !important;
    }
    .el-input__inner {
      height: 34px;
      line-height: 34px;
    }
  }
</style>
